<template>
	<div id = "showAllCarLoc">
		<div class="top">
			<el-button type="primary" @click = 'addLine'>添加路线查看</el-button>
		</div>
		<div class="main">
			<mapComponent :gongneng = 'gongneng' :cars = 'car' :driving = 'pointList'></mapComponent>
		</div>
	</div>
</template>

<script>
	import mapComponent from '../info/mapComponent.vue'
	export default{
		data(){
			return{
				car:'',
				driving:'',
				gongneng:3,
				pointList:[],
				pointList1:[]
				
			}
		},
		components:{
			mapComponent,
		},
		created() {
			this.car = this.$route.params.car;
			this.getDriving()
		},
		methods:{
			addLine(){
				this.pointList = this.pointList1;
			},
			getDriving(){
				this.$axios.get('/api/admin/getAllDriving')
				.then(data=>{
					if(data.status == 200){
						this.driving = data.data
						for(let i in this.driving){
							let info = this.driving[i];
							this.changePoint(info)
						}
					}
				})
			},
			getLocation(car) {
				this.ptList = new BMap.Point(car.cur_loc_lon, car.cur_loc_lat)
				let geoc = new BMap.Geocoder();
				geoc.getLocation(this.ptList, (result) => {
					let addComp = result.addressComponents;
					this.loc = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " +
						addComp.streetNumber;
				})
			
			},
			changePoint(info){
				let pointL = [
					new BMap.Point(info.dep_place_lon,info.dep_place_lat),
					new BMap.Point(info.cur_loc_lon,info.cur_loc_lat),
					new BMap.Point(info.des_lon,info.des_lat)
				]
				this.pointList1.splice(this.pointList1.length,1,pointL);
			}
			
		}
	}
</script>

<style lang="less" scoped>
	#showAllCarLoc{
		width: 100%;
		height: 100%;
		.top{
			width: 100%;
			height: 60px;
			position: relative;
			button{
				position: absolute;
				top:10px;
				right: 50px;
			}
		}
		.main{
			width: 100%;
			height: 660px;	
		}
	}
</style>
